<template>
	<view>
		<view class="tabBar fixed flex align-center justify-center white" :style="{height:is_lhp?'140rpx':'140rpx'}">
			<view class="tabBar_list flex align-center justify-around" :style="{paddingBottom:is_lhp?'40rpx':''}">
				<view v-for="(item) in tab_nav_list" :key="item.id"  class="tabBar_item font28 flex align-center column justify-center" @click="cut_index(item)"><!-- -->
					<image :src="curTab == item.id?item.selectedIconPath:item.iconPath"></image>
					<text :class="curTab==item.id?'tabBar_name nav_active':'tabBar_name'">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Vue from 'vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuModule from '@/pages/shared/cu-module.vue'
	import tabbarDate from '@/static/tabBar.js'
	export default {
		components:{
			cuModule
		},
		computed: {
			// ...mapState(['hasLogin', 'userId', 'user','latitude','longitude','location','update','cityInfo','tabBarH'])
		},
		props:{
			tabIndex: {
				//图片的尺寸
				type: [String,Number],
				default: "1"
			},
			tabListParent:{
				type:[Array],
				default:()=>{
					return []
				}
			}
		},
		data() {
			return {
				curTab:1,
				taskId:'',
				tab_nav_list :tabbarDate,
				is_lhp:false
			};
		},
		created(){
			this.curTab=new Number(this.tabIndex);
			if(this.tabListParent.length>0){
				this.tab_nav_list=this.tabListParent;
			}
		},
		mounted() {
			let self = this
			this.$nextTick(function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.tabBar').boundingClientRect(data => {
					self.$store.commit("update",{tabBarH: data.height})
				}).exec();
			})
		},
		methods:{
			
			cut_index(e){
				let _this = this
				this.curTab=e.id;
				if (!this.hasLogin||this.userId===undefined) {
					this.$refs.login.open()
					return
				}
				e.id==2?this.san():this.redirect(e)
			},
			
			
			/**路由跳转**/
			redirect(e){
				uni.reLaunch({
					"url":e.pagePath,
					success:res=>{
						uni.setNavigationBarColor({
							frontColor:e.frontColor,
							backgroundColor: e.backgroundColor
						})
					}
				})
			},
			/**获取地理信息**/
			getLoactin(){
				this.getCityInfo();
				return new Promise((resolve,reject)=>{
					uni.getSetting({
						success:res=>{
							console.log(res)
							if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")){
								if (res.authSetting["scope.userLocation"]){
									 this.getCityInfo();
								}else{
									uni.showModal({
										title: "提示",
										content: "请重新授权获取你的地理位置，否则部分功能将无法使用",
										success:v=>{
											if(v.confirm){
												uni.openSetting({
													success: () => this.getCityInfo()
												});
											}else{
												reject("请授权获取你的地理位置，否则部分功能将无法使用！");
											}
										}
									})
								}
							}else{
								this.getCityInfo();
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabBar{ width:100%;height: 98rpx;
	bottom:0px;left:0px;right:0px;
	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
	.tabBar_list{ 
		width:100%;
		height: 100%;
		image{ 
			width:68rpx;height: 68rpx;margin-bottom:2rpx;
		}
		.tabBar_item{ color: #969BA3;width: 33%;
		}
		.tabBar_item2{
			//width:68rpx;
			height:100%;
			font-size: 28rpx;color: #969BA3;z-index: 101;
			image{ 
				width:68rpx;height: 68rpx;
			}
		}
	 } 
}
.nav_active{color: #007AFF;}
.hr{
	height: 100%;
	border-left: 1px solid #eee;
}
</style>
